<template>
  <div class="tinymce-box">
    <Editor
      id="myedit"
      v-model="content"
      :init="init"
      tag-name="div"
      :disabled="disabled"
      @onClick="onClick"
    />
  </div>
</template>

<script>

import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入则不显示编辑器
import 'tinymce/themes/silver'  //编辑器主题，不引入则报错
import 'tinymce/icons/default'  //引入编辑器图标icon，不引入则不显示对应图标
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/advlist";
import "tinymce/plugins/autoresize";
import "tinymce/plugins/autosave";
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/code"; //查看源码
import "tinymce/plugins/codesample"; //插入代码
import "tinymce/plugins/directionality"; //
import "tinymce/plugins/fullpage"; //页面属性编辑
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help"; //帮助
import "tinymce/plugins/hr"; //横线
import "tinymce/plugins/image"; //图片
import "tinymce/plugins/imagetools"; //图片工具
import "tinymce/plugins/importcss"; //图片工具
import "tinymce/plugins/insertdatetime"; //时间插入
import "tinymce/plugins/media"; //媒体插入
import "tinymce/plugins/paste"; //粘贴
import "tinymce/plugins/preview"; //预览
import "tinymce/plugins/quickbars"; //快捷菜单
import "tinymce/plugins/searchreplace"; //查询替换
import "tinymce/plugins/tabfocus"; //
import "tinymce/plugins/textpattern"; //
import "tinymce/plugins/toc"; //
import "tinymce/plugins/visualblocks"; //
import "tinymce/plugins/visualchars"; //
import "tinymce/plugins/wordcount"; //数字统计
import { onMounted } from '@vue/runtime-core';
import { ref, watch } from 'vue';
export default {
  name: 'Uedit',
  components: {
    Editor,
  },
  props: {
    modelValue: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default:
        'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link template code codesample table charmap hr pagebreak nonbreaking insertdatetime advlist lists wordcount textpattern autosave',
    },
    toolbar: {
      type: [String, Array],
      default:
        'fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
                styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
                table image media charmap hr pagebreak insertdatetime print preview | code selectall | indent2em lineheight formatpainter axupimgs',
    },
    height: {
      type: Number,
      default: 500,
    },
  },
  emits: { 'update:modelValue': null },
  setup(props, context) {
    const init = {
        language_url: '/tinymce/langs/zh_CN.js', // 中文语言包路径
        language: "zh_CN",
        skin_url: '/tinymce/skins/ui/oxide', //皮肤，浅色
        // skin_url: '/tinymce/skins/ui/oxide-dark',//皮肤：暗色
        menubar: false, // 隐藏菜单栏
        autoresize_bottom_margin: 50,
        max_height: 400,
        min_height: 600,
        toolbar_mode: "none",
        plugins:
            "wordcount visualchars visualblocks toc textpattern tabfocus searchreplace quickbars preview media insertdatetime importcss imagetools image hr help fullscreen fullpage directionality codesample code charmap link code table lists advlist autoresize autosave", // 插件需要import进来
        toolbar:
            "formats undo redo fontsizeselect fontselect template fullpage|wordcount toc spellchecker searchreplace|save preview pagebreak nonbreaking|media image|outdent indent aligncenter alignleft alignright alignjustify lineheight  underline quicklink h2 h3 blockquote numlist bullist table removeformat forecolor backcolor bold italic  strikethrough hr charmap link insertdatetime|subscript superscript cut codesample code |anchor preview fullscreen|help",
        content_style: "p {margin: 5px 0; font-size: 14px}",
        fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
        font_formats:
            "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
        branding: false,
        elementpath: false,
        resize: false, // 禁止改变大小
        statusbar: false, // 隐藏底部状态栏
    };
    tinymce.init; // 初始化

    const revert_data = content => {
      context.emit('update:modelValue', content);
    };
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    function onClick(e) {
      this.$emit('onClick', e, tinymce);
    }
    // 可以添加一些自己的自定义事件，如清空内容
    function clear() {
      this.contentValue = '';
    }
    const setEditMode = type => {
      tinymce.editors['myedit'].setMode(type); //开启只读模式
    };
    const content = ref();
    watch(
      () => props.modelValue,
      (initInfo, prevInitInfo) => {
        content.value = props.modelValue;
      },
    );
    watch(
      () => content.value,
      (initInfo, prevInitInfo) => {
        revert_data(content);
      },
    );
    onMounted(() => {
      // readonly();
    });
    return {
      content,
      init,
      revert_data,
      onClick,
      clear,
      setEditMode,
      // contentValue: this.value,
    };
  },
  // data() {
  //   return {
  //     content: this.modelValue,
  //   };
  // },

  mounted() {},
  // watch: {
  //   content() {
  //     this.revert_data(this.content);
  //   },
  // },
};
</script>

<!-- <style lang="less">
.tinymce-box {
}
</style> -->
